<template>
  <div>
    <div style="background-color: #13293B;transition: all 1s ease-in;margin-top: -60px;height: 60px;"></div>
    <div class="pwd-container" id="backPwdIndex">

      <!-- 用户中心首页 2018/2/20 20:56 zhangQ -->
      <Tabs v-model="currentName">
        <TabPane label="基本信息" name="1">
        </TabPane>
        <TabPane label="修改信息" name="2">
        </TabPane>
        <TabPane label="修改密码" name="3">
        </TabPane>
      </Tabs>
      <keep-alive>
        <!--基本信息-->
        <Card v-if="currentName=='1'">
          <Row>
            <i-col :span="4" style="text-align: right">
              用户名：
            </i-col>
            <i-col :span="10">
              11111
            </i-col>
          </Row>
          <Row>
            <i-col :span="4" style="text-align: right">
              用户名：
            </i-col>
            <i-col :span="10">
              11111
            </i-col>
          </Row>
          <Row>
            <i-col :span="4" style="text-align: right">
              用户名：
            </i-col>
            <i-col :span="10">
              11111
            </i-col>
          </Row>
          <Row>
            <i-col :span="4" style="text-align: right">
              用户名：
            </i-col>
            <i-col :span="10">
              11111
            </i-col>
          </Row>
          <Row>
            <i-col :span="4" style="text-align: right">
              用户名：
            </i-col>
            <i-col :span="10">
              11111
            </i-col>
          </Row>
        </Card>
      </keep-alive>
      <keep-alive>
        <!--修改信息-->
        <Card v-if="currentName=='2'">
        </Card>
      </keep-alive>
      <keep-alive>
        <!--修改密码-->
        <Card v-if="currentName=='3'">
        </Card>
      </keep-alive>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data () {
      let currentName = '1'
      let datas = {currentName}
      return datas
    },
    methods: {
      /**
       * 点击Tabs切换
       * @param val
       */
      tabClick (val) {
        if (!val) {
          val = this.currentName
        } else {
          this.currentName = val
        }
      }
    }
  }
</script>

<style scoped>
  /*.pwd-container {*/
  /*height: 110px;*/
  /*padding: 30px 250px;*/
  /*background-color: #ffffff*/
  /*}*/

  .pwd-container {
    width: 1100px;
    margin: 60px auto;
    /*display: flex;*/
    justify-content: space-between;
    background-color: #ffffff;
  }

  .steps-box {
    height: 110px;
    padding: 30px 250px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 2px 2px 0 0;
  }

  .content-box {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 2px;
    height: 276px;
    padding: 50px 341px;
  }

  .content-box .valit-btn {
    width: 316px;
    height: 40px;
    background-image: linear-gradient(-180deg, #FFFFFF 0%, #F3F4F1 100%);
    border: 1px solid #CCCCCC;
    border-radius: 2px;

    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;

    text-align: left;
  }

  .content-box .valit-btn .oval {
    font-size: 18px;
    color: #3A91F5;
  }

  .prompt-title {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1B1E21;
    letter-spacing: 0;
    line-height: 14px;
    /*padding-left: 25px;*/
  }

  .prompt-descrip {
    ont-family: PingFangSC-Regular;
    font-size: 14px;
    color: #666666;
    letter-spacing: 0;
    line-height: 14px;
    /*padding-left: 25px;*/
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .prompt-valie-btn {
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #E4B017;
    letter-spacing: 0;
  }

  .prompt-valie-btn-disable {
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #0F1717;
    letter-spacing: 0;
  }

  .prompt-complete {
    padding: 46px 0 49px 0;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #1B1E21;
    margin: 0 auto;
  }

  .prompt-complete-icon {
    color: #52c461;
    font-size: 30px;
    margin-bottom: -5px;
  }

  input {
    width: 316px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 2px;
  }
</style>
<style>

  .backPwdStep .ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner {
    border-color: #FECA2E;
    background-color: #FECA2E;
  }

  .backPwdStep .ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner span {
    color: #131820;
  }

  .backPwdStep .ivu-steps-item.ivu-steps-status-wait .ivu-steps-head-inner {
    border-color: #eee;
    background-color: #eee;
  }

  .backPwdStep .ivu-steps-item.ivu-steps-status-wait .ivu-steps-head-inner span {
    color: #cfcfcf;
  }

  /*.backPwdStep .ivu-steps-item.ivu-steps-status-wait .ivu-steps-title{

  }*/
  .backPwdStep .ivu-steps-item.ivu-steps-main {
    display: block;
  }

  .backPwdStep .ivu-steps-item .ivu-steps-title {
    display: block;
    padding: 0;
    margin-top: 5px;
    text-align: center;
  }

  .backPwdStep {
    margin-left: 100px;
  }
</style>

